<script setup>
import {updateApi} from "@/api/EmpAPI";
import MyForm from "@/components/MyForm.vue";
import {onMounted, shallowReactive, shallowRef} from "vue";
import {RULE} from "@/const";
import MyNav from "@/components/MyNav.vue";
import router from "@/router";
import {listApi} from "@/api/DeptAPI";
import {genderFormat, getResponseData} from "@/utils";
import {useStore} from "vuex";

let vuex = useStore();
let emp = JSON.parse(sessionStorage.getItem('emp'));

// 表单数据 + 表单规则
let optionItems = [];
let items = shallowRef([
  {'label': '登陆账号', 'prop': 'username', 'span': 12, 'readonly': true},
  {'label': '真实姓名', 'prop': 'realname', 'span': 12},
  {'label': '性别', 'prop': 'gender','type': 'select', 'optionItems': [
      {'label': '女', 'value': 0},
      {'label': '男', 'value': 1},
      {'label': '保密', 'value': 2},
    ] , 'span': 12},
  {'label': '年龄', 'prop': 'age', 'span': 12, 'type': 'number'},
  {'label': '手机号码', 'prop': 'phone', 'span': 12},
  {'label': '微信号码', 'prop': 'wechat', 'span': 12},
  {'label': '电子邮件', 'prop': 'email', 'span': 12},
  {'label': '所在部门', 'prop': 'fkDeptId', 'type': 'select',  'optionItems': optionItems, 'span': 12},
  {'label': '入职日期', 'prop': 'hiredate', 'type': 'date', 'span': 12},
  {'label': '所在省份', 'prop': 'province', 'span': 12},
  {'label': '详细地址', 'prop': 'address', 'type': 'textarea', 'span': 12},
  {'label': '员工描述', 'prop': 'info', 'type': 'textarea', 'span': 12},
]);
let data = shallowReactive({
  'id': emp['id'],
  'username': emp['username'],
  'realname': emp['realname'],
  'gender': emp['gender'],
  'age': emp['age'],
  'phone': emp['phone'],
  'wechat': emp['wechat'],
  'email': emp['email'],
  'fkDeptId': emp['fkDeptId'],
  'hiredate': emp['hiredate'],
  'province': emp['province'],
  'address': emp['address'],
  'info': emp['info'],
});
let rules = {
  'info': RULE.COMMON_INFO,
  'address': RULE.COMMON_INFO,
  'phone': RULE.PHONE,
  'email': RULE.EMAIL,
};

function success() {
  let loginEmp = JSON.parse(sessionStorage.getItem('loginEmp'));
  if (loginEmp['id'] === emp['id']){
    sessionStorage.clear();
    vuex.dispatch("setLoginFlag", false);
    router.push('/');
  }else {
    router.push('/Emp');
  }
  // setTimeout(() => router.push('/ums/Emp'), 1000);
}

/*======================= 查询部门全部记录 ===========================*/
async function listDept(){
  let res = await listApi();
  let depts = getResponseData(res);
  Object.values(depts).forEach(dept => {
    optionItems.push({'label': dept['title'], 'value': dept['id']})
  })
}

/*======================= 加载函数 ===========================*/
onMounted(() => {
  listDept();
})

</script>

<template>

  <my-nav :items="[
    {'icon': 'User', 'label': '员工管理'},
    {'icon': 'User', 'label': '员工列表', 'url': '/Emp'},
    {'icon': 'User', 'label': '修改员工'},
  ]"/>

  <div class="emp-insert-body">
    <my-form type="update"
             :items="items"
             :data="data"
             :rules="rules"
             :api="updateApi"
             :fn="success"
    />
  </div>

</template>

<style scoped lang="scss">

.emp-insert-body {
  margin-top: 50px;
}

</style>